<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        *{
            box-sizing: border-box;

            /*-webkit-前缀主要是为了兼容Chrome和safari浏览器的私有样式.*/
            -webkit-box-sizing: border-box;

            /*-moz-前缀是为了兼容firefox浏览器的私有属性.*/
            -moz-box-sizing: 

            /*-ms-前缀是为了兼容ie浏览器的私有属性*/
            
        }
        .font{
            font-size: 30px;
        }
        .color{
            color: red;
        }
        .bolder{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <!--class可以设置多个值,筛选的时候可以通过任意一个值找到该元素.-->
    <p class="font">这是一个p标签</p>
    <p class="font color">这是第二个p标签</p>
    <p class="font color bolder">这是第三个p标签</p>
    <p class="color font">这是第四个p标签</p>
    <div class="color font">这是一个div标签</div>
</body>
</html>